<template>
  <div class="operator-management">
    <!-- 列表页 -->
    <el-dialog v-model="isEditDialog" title="操作员管理 增改" width="800px">
      <el-form class="edit-form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="form.account" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="选择职务">
              <el-select v-model="form.position" placeholder="请选择职务">
                <el-option label="总经理" value="总经理" />
                <el-option label="文员" value="文员" />
                <!-- 可根据需求添加更多职务 -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="form.idCard" placeholder="请输入身份证号" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" placeholder="请输入密码"   />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="permission-group">
          <el-form-item label="系统期初">
            <el-checkbox-group v-model="form.permissions.systemInit">
              <el-checkbox label="期初建账">期初建账</el-checkbox>
              <el-checkbox label="添加员工">添加员工</el-checkbox>
              <el-checkbox label="产品库存">产品库存</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="收银操作">
            <el-checkbox-group v-model="form.permissions.cashier">
              <el-checkbox label="新建政策">新建政策</el-checkbox>
              <el-checkbox label="新增收款单">新增收款单</el-checkbox>
              <el-checkbox label="新增销售单">新增销售单</el-checkbox>
              <el-checkbox label="当日订单">当日订单</el-checkbox>
              <el-checkbox label="换货单">换货单</el-checkbox>
              <el-checkbox label="退货单">退货单</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="数据统计">
            <el-checkbox v-model="form.permissions.dataStats" label="数据统计" />
          </el-form-item>
          <el-form-item label="美容院管理">
            <el-checkbox-group v-model="form.permissions.salon">
              <el-checkbox label="新建门店">新建门店</el-checkbox>
              <el-checkbox label="门店期初">门店期初</el-checkbox>
              <el-checkbox label="门店列表">门店列表</el-checkbox>
              <el-checkbox label="资金账户">资金账户</el-checkbox>
              <el-checkbox label="门店对账">门店对账</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="产品管理">
            <el-checkbox-group v-model="form.permissions.product">
              <el-checkbox label="品牌管理">品牌管理</el-checkbox>
              <el-checkbox label="新增产品">新增产品</el-checkbox>
              <el-checkbox label="库存管理">库存管理</el-checkbox>
              <el-checkbox label="入库单">入库单</el-checkbox>
              <el-checkbox label="新增盘点">新增盘点</el-checkbox>
              <el-checkbox label="报损报溢">报损报溢</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="工厂管理">
            <el-checkbox v-model="form.permissions.factory" label="工厂管理" />
          </el-form-item>
          <el-form-item label="仓库管理">
            <el-checkbox v-model="form.permissions.warehouse" label="仓库管理" />
          </el-form-item>
          <el-form-item label="小程序管理">
            <el-checkbox-group v-model="form.permissions.miniProgram">
              <el-checkbox label="门店账号">门店账号</el-checkbox>
              <el-checkbox label="店铺装修">店铺装修</el-checkbox>
              <el-checkbox label="直播管理">直播管理</el-checkbox>
              <el-checkbox label="宣传素材">宣传素材</el-checkbox>
              <el-checkbox label="申请记录">申请记录</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="商品管理">
            <el-checkbox-group v-model="form.permissions.goods">
              <el-checkbox label="商品管理">商品管理</el-checkbox>
              <el-checkbox label="管理视角">管理视角</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <div class="dialog-footer">
          <el-button @click="isEditDialog = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认提交</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 列表页 -->
    <div class="list-page">
      <h3 class="page-title">操作员管理</h3>
      <el-button type="primary" style="background-color: #00b4b4; border-color: #00b4b4;" @click="openAddDialog">新增操作员</el-button>
      <!-- <el-button type="text" class="return-btn" style="position: absolute; top: 20px; right: 20px;" @click="handleReturn">返回</el-button> -->

      <el-table :data="operatorList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="index" label="序号" width="100" center />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="idCard" label="身份证号" />
        <el-table-column prop="position" label="职务" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="password" label="密码" />
        <el-table-column label="权限">
          <template #default="scope">
            {{ formatPermissions(scope.row.permissions) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="warning" @click="openEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 列表数据
const operatorList = ref([
  {
    index: 1,
    name: '李四',
    gender: '男',
    idCard: '413028197836941236',
    position: '总经理',
    phone: '17936453214',
    account: '11117483347',
    password: '7483347',
    permissions: {
      systemInit: ['期初建账', '产品库存'],
      cashier: ['新建政策', '新增收款单', '新增销售单', '当日订单', '换货单', '退货单'],
      dataStats: false,
      salon: [],
      product: ['品牌管理', '新增产品', '库存管理', '入库单', '新增盘点', '报损报溢'],
      factory: false,
      warehouse: true,
      miniProgram: [],
      goods: []
    }
  },
  {
    index: 2,
    name: '李丽丽',
    gender: '女',
    idCard: '413028197836941236',
    position: '文员',
    phone: '17936453214',
    account: '32457483347',
    password: '7483347',
    permissions: {
      systemInit: [],
      cashier: [],
      dataStats: false,
      salon: [],
      product: [],
      factory: false,
      warehouse: true,
      miniProgram: ['门店账号', '店铺装修', '直播管理', '宣传素材', '申请记录'],
      goods: []
    }
  }
]);

// 表单数据
const form = reactive({
  name: '',
  gender: '女',
  idCard: '',
  position: '总经理',
  phone: '',
  account: '',
  password: '',
  permissions: {
    systemInit: [],
    cashier: [],
    dataStats: false,
    salon: [],
    product: [],
    factory: false,
    warehouse: false,
    miniProgram: [],
    goods: []
  }
});

// 对话框控制
const isEditDialog = ref(false);

// 打开新增对话框
const openAddDialog = () => {
  resetForm();
  isEditDialog.value = true;
};

// 打开编辑对话框
const openEditDialog = (row) => {
  // 深拷贝数据，避免直接修改原数据
  form.name = row.name;
  form.gender = row.gender;
  form.idCard = row.idCard;
  form.position = row.position;
  form.phone = row.phone;
  form.account = row.account;
  form.password = row.password;
  form.permissions = JSON.parse(JSON.stringify(row.permissions));
  isEditDialog.value = true;
};

// 重置表单
const resetForm = () => {
  form.name = '';
  form.gender = '女';
  form.idCard = '';
  form.position = '总经理';
  form.phone = '';
  form.account = '';
  form.password = '';
  form.permissions = {
    systemInit: [],
    cashier: [],
    dataStats: false,
    salon: [],
    product: [],
    factory: false,
    warehouse: false,
    miniProgram: [],
    goods: []
  };
};

// 提交表单
const submitForm = () => {
  if (!form.name || !form.idCard || !form.phone || !form.account || !form.password) {
    return ElMessage.warning('请填写完整信息');
  }

  const newRow = {
    index: operatorList.value.length + 1,
    name: form.name,
    gender: form.gender,
    idCard: form.idCard,
    position: form.position,
    phone: form.phone,
    account: form.account,
    password: form.password,
    permissions: JSON.parse(JSON.stringify(form.permissions))
  };

  if (form.account === operatorList.value.find(item => item.account === form.account)?.account) {
    // 编辑
    const index = operatorList.value.findIndex(item => item.account === form.account);
    operatorList.value.splice(index, 1, newRow);
  } else {
    // 新增
    operatorList.value.push(newRow);
  }

  isEditDialog.value = false;
  ElMessage.success('操作成功');
};

// 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定删除该操作员吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = operatorList.value.findIndex(item => item.account === row.account);
    operatorList.value.splice(index, 1);
    ElMessage.success('删除成功');
  }).catch(() => {});
};

// 格式化权限显示
const formatPermissions = (permissions) => {
  const permissionArr = [];
  for (const key in permissions) {
    if (key === 'systemInit' && permissions[key].length) {
      permissionArr.push('系统期初');
    } else if (key === 'cashier' && permissions[key].length) {
      permissionArr.push('收银操作');
    } else if (key === 'dataStats' && permissions[key]) {
      permissionArr.push('数据统计');
    } else if (key === 'salon' && permissions[key].length) {
      permissionArr.push('美容院管理');
    } else if (key === 'product' && permissions[key].length) {
      permissionArr.push('产品管理');
    } else if (key === 'factory' && permissions[key]) {
      permissionArr.push('工厂管理');
    } else if (key === 'warehouse' && permissions[key]) {
      permissionArr.push('仓库管理');
    } else if (key === 'miniProgram' && permissions[key].length) {
      permissionArr.push('小程序管理');
    } else if (key === 'goods' && permissions[key].length) {
      permissionArr.push('商品管理');
    }
  }
  return permissionArr.join('，');
};

// 返回操作
const handleReturn = () => {
  // 可根据实际需求添加返回逻辑
  ElMessage.info('返回');
};
</script>

<style scoped>
.operator-management {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.return-btn {
  color: #666;
}

.edit-form {
  padding: 20px;
}

.permission-group {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.list-page {
  position: relative;
}
</style>